<template>
  <view
    v-if="openModal"
    class="wx-modal"
  >
    <view
      class="wam__mask"
      @touchmove.prevent=""
      @tap.stop="closeModal"
    ></view>
    
    <!-- 内容区域 -->
    <view class="wam__wrapper">
      <!-- 关闭按钮 -->
      <view class="wam__close-btn" @tap.stop="closeModal">
        <text class="tn-icon-close"></text>
      </view>
      
      <view class="tn-text-center tn-text-lg">
        1024条评论
      </view>
      
      <view class="tn-padding-top-sm">
        
        <scroll-view scroll-y="true" style="max-height: 60vh;">
          
          <!-- 评论 -->
          <view class="tn-margin tn-padding-bottom">
            <!-- 图标logo/头像 -->
            <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl">
              <view class="justify-content-item">
                <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                  <view class="logo-pic">
                    <view class="logo-image">
                      <view class="" style="background-image:url('https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1692940242423-assets/web-upload/6d82b929-67e4-4919-a826-c931940f5872.jpeg');width: 60rpx;height: 60rpx;background-size: cover;">
                      </view>
                    </view>
                  </view>
                  <view class="tn-padding-right tn-padding-left-sm">
                    <view class="tn-padding-right tn-text-df tn-flex tn-flex-col-center">
                      <view class="justify-content-item tn-text-bold">
                        凶我试试
                      </view>
                      <!-- <view class="justify-content-item tag-user tn-color-white" style="font-size: 16rpx;">
                        <text class="">作者</text>
                      </view> -->
                    </view>
                    <view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray" style="padding-top: 5rpx;">
                      UE设计师
                    </view>
                  </view>
                </view>
              </view>
              <view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
                <view class="tn-text-center">
                  <text class="tn-icon-more-vertical"></text>
                </view>
              </view>
            </view>
            
            <view class="" style="margin: 20rpx 30rpx 10rpx 80rpx;">
              说好的带我飞呢？？就这？？
            </view>
            <view class="tn-flex tn-flex-row-between" style="margin: 0rpx 0rpx 30rpx 80rpx;">
              <view class="justify-content-item tn-text-sm tn-color-gray" style="padding-top: 5rpx;">
                <text class="tn-color-gray tn-padding-right">12分钟前</text>
                <text class="tn-color-grey">回复</text>
              </view>
              <view class="justify-content-item tn-text-sm tn-color-select">
                <text class="tn-padding-xs">16</text>
                <text class="tn-icon-praise-simple-fill"></text>
              </view>
            </view>
            
            
            <view class="tn-padding-sm" style="margin: 20rpx 0rpx 30rpx 80rpx;border-radius: 10rpx;background-color: #A6A9CB10;">
              <view class="tn-flex tn-flex-row-between tn-flex-col-center">
                <view class="justify-content-item">
                  <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                    <view class="logo-pic">
                      <view class="logo-image-min">
                        <view class="" style="background-image:url('https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1692940242375-assets/web-upload/72155ffc-795c-4cc4-b4b5-171fbb44ab8d.jpeg');width: 40rpx;height: 40rpx;background-size: cover;">
                        </view>
                      </view>
                    </view>
                    <view class="tn-padding-right tn-text-df tn-flex tn-flex-col-center">
                      <view class="justify-content-item tn-text-bold tn-padding-left-xs">
                        不许凶我吖
                      </view>
                      <view class="justify-content-item tag-user tn-color-white" style="font-size: 16rpx;">
                        <text class="">作者</text>
                      </view>
                    </view>
                  </view>
                </view>
                <view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
                  <view class="tn-text-center">
                    <text class="tn-icon-more-vertical"></text>
                  </view>
                </view>
              </view>
              <view class="tn-padding-top-sm ">设计师何必难为设计师？冤冤相报何时了，不如喝杯奶茶忘了那个仔</view>
              
              <view class="tn-flex tn-flex-row-between tn-margin-top-xs">
                <view class="justify-content-item tn-text-xs tn-color-gray" style="padding-top: 5rpx;">
                  刚刚
                </view>
                <view class="justify-content-item tn-text-xs tn-color-gray">
                  <text class="tn-padding-xs">3</text>
                  <text class="tn-icon-praise-simple"></text>
                </view>
              </view>
            </view>
            
            <!-- 评论2-->
            <!-- 图标logo/头像 -->
            <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl">
              <view class="justify-content-item">
                <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                  <view class="logo-pic">
                    <view class="logo-image">
                      <view class="" style="background-image:url('https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1692940242390-assets/web-upload/d4f101d0-29c5-43d2-8519-4ac2e5199726.jpeg');width: 60rpx;height: 60rpx;background-size: cover;">
                      </view>
                    </view>
                  </view>
                  <view class="tn-padding-right tn-padding-left-sm">
                    <view class="tn-padding-right tn-text-df tn-flex tn-flex-col-center">
                      <view class="justify-content-item tn-text-bold">
                        原来是猪猪吖
                      </view>
                      <!-- <view class="justify-content-item tag-user tn-color-white" style="font-size: 16rpx;">
                        <text class="">作者</text>
                      </view> -->
                    </view>
                    <view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray" style="padding-top: 5rpx;">
                      高级UI设计师
                    </view>
                  </view>
                </view>
              </view>
              <view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
                <view class="tn-text-center">
                  <text class="tn-icon-more-vertical"></text>
                </view>
              </view>
            </view>
            
            <view class="" style="margin: 20rpx 30rpx 10rpx 80rpx;">
              求摄影师微信，谢谢
            </view>
            <view class="tn-flex tn-flex-row-between" style="margin: 0rpx 0rpx 30rpx 80rpx;">
              <view class="justify-content-item tn-text-sm tn-color-gray" style="padding-top: 5rpx;">
                <text class="tn-color-gray tn-padding-right">8月29日 08:59</text>
                <text class="tn-color-grey">回复</text>
              </view>
              <view class="justify-content-item tn-text-sm tn-color-gray">
                <text class="tn-padding-xs">62</text>
                <text class="tn-icon-praise-simple"></text>
              </view>
            </view>
            
            
            
            
            <!-- 评论3-->
            <!-- 图标logo/头像 -->
            <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl">
              <view class="justify-content-item">
                <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                  <view class="logo-pic">
                    <view class="logo-image">
                      <view class="" style="background-image:url('https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1692940242345-assets/web-upload/7c70f145-2c93-423e-a9e0-c8ab00b9c0ae.jpeg');width: 60rpx;height: 60rpx;background-size: cover;">
                      </view>
                    </view>
                  </view>
                  <view class="tn-padding-right tn-padding-left-sm">
                    <view class="tn-padding-right tn-text-df tn-flex tn-flex-col-center">
                      <view class="justify-content-item tn-text-bold">
                        抓住那只猪
                      </view>
                      <!-- <view class="justify-content-item tag-user tn-color-white" style="font-size: 16rpx;">
                        <text class="">作者</text>
                      </view> -->
                    </view>
                    <view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray" style="padding-top: 5rpx;">
                      高级产品经理
                    </view>
                  </view>
                </view>
              </view>
              <view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
                <view class="tn-text-center">
                  <text class="tn-icon-more-vertical"></text>
                </view>
              </view>
            </view>
            
            <view class="" style="margin: 20rpx 30rpx 10rpx 80rpx;">
              吃瓜群众到此一游，阿巴阿巴
            </view>
            
            <view class="tn-flex tn-flex-row-between" style="margin: 0rpx 0rpx 30rpx 80rpx;">
              <view class="justify-content-item tn-text-sm tn-color-gray" style="padding-top: 5rpx;">
                <text class="tn-color-gray tn-padding-right">8月12日 12:12</text>
                <text class="tn-color-grey">回复</text>
              </view>
              <view class="justify-content-item tn-text-sm tn-color-gray">
                <text class="tn-padding-xs">28</text>
                <text class="tn-icon-praise-simple"></text>
              </view>
            </view>
            
            
            <!-- 评论4-->
            <!-- 图标logo/头像 -->
            <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl">
              <view class="justify-content-item">
                <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                  <view class="logo-pic">
                    <view class="logo-image">
                      <view class="" style="background-image:url('https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1692940242388-assets/web-upload/471a3e0d-246d-4daa-ab83-43e70011177c.jpeg');width: 60rpx;height: 60rpx;background-size: cover;">
                      </view>
                    </view>
                  </view>
                  <view class="tn-padding-right tn-padding-left-sm">
                    <view class="tn-padding-right tn-text-df tn-flex tn-flex-col-center">
                      <view class="justify-content-item tn-text-bold">
                        我们都是好孩子
                      </view>
                      <!-- <view class="justify-content-item tag-user tn-color-white" style="font-size: 16rpx;">
                        <text class="">作者</text>
                      </view> -->
                    </view>
                    <view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray" style="padding-top: 5rpx;">
                      高级项目经理
                    </view>
                  </view>
                </view>
              </view>
              <view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
                <view class="tn-text-center">
                  <text class="tn-icon-more-vertical"></text>
                </view>
              </view>
            </view>
            
            <view class="" style="margin: 20rpx 30rpx 10rpx 80rpx;">
              我贼会滑-划水
            </view>
            
            <view class="tn-flex tn-flex-row-between" style="margin: 0rpx 0rpx 30rpx 80rpx;">
              <view class="justify-content-item tn-text-sm tn-color-gray" style="padding-top: 5rpx;">
                <text class="tn-color-gray tn-padding-right">8月12日 10:26</text>
                <text class="tn-color-grey">回复</text>
              </view>
              <view class="justify-content-item tn-text-sm tn-color-gray">
                <text class="tn-padding-xs">16</text>
                <text class="tn-icon-praise-simple"></text>
              </view>
            </view>
            
            <!-- 评论5-->
            <!-- 图标logo/头像 -->
            <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-top-xl">
              <view class="justify-content-item">
                <view class="tn-flex tn-flex-col-center tn-flex-row-left">
                  <view class="logo-pic">
                    <view class="logo-image">
                      <view class="" style="background-image:url('https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1692940242318-assets/web-upload/6d5b712d-5996-4a80-bb02-4ddc23e01acf.jpeg');width: 60rpx;height: 60rpx;background-size: cover;">
                      </view>
                    </view>
                  </view>
                  <view class="tn-padding-right tn-padding-left-sm">
                    <view class="tn-padding-right tn-text-df tn-flex tn-flex-col-center">
                      <view class="justify-content-item tn-text-bold">
                        可我会像
                      </view>
                      <!-- <view class="justify-content-item tag-user tn-color-white" style="font-size: 16rpx;">
                        <text class="">作者</text>
                      </view> -->
                    </view>
                    <view class="tn-padding-right tn-text-ellipsis tn-text-xs tn-color-gray" style="padding-top: 5rpx;">
                      高级产品经理
                    </view>
                  </view>
                </view>
              </view>
              <view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-color-gray">
                <view class="tn-text-center">
                  <text class="tn-icon-more-vertical"></text>
                </view>
              </view>
            </view>
            
            <view class="" style="margin: 20rpx 30rpx 10rpx 80rpx;">
              待你长发及腰
            </view>
            
            <view class="tn-flex tn-flex-row-between" style="margin: 0rpx 0rpx 30rpx 80rpx;">
              <view class="justify-content-item tn-text-sm tn-color-gray" style="padding-top: 5rpx;">
                <text class="tn-color-gray tn-padding-right">8月09日 18:06</text>
                <text class="tn-color-grey">回复</text>
              </view>
              <view class="justify-content-item tn-text-sm tn-color-gray">
                <text class="tn-padding-xs">19</text>
                <text class="tn-icon-praise-simple"></text>
              </view>
            </view>
            
          </view>
          
          <view class="tn-tabbar-height"></view>
          
        </scroll-view>
        
      </view>
      
      <!-- 评论输入压屏窗-->
      <tn-landscape :show="show" @close="closeLandscape" :closeBtn="false">
        <view class="chat-input" style="">
          <view class="tn-bg-gray--light tn-padding tn-text-justify" style="border-radius: 20rpx;margin: 40rpx 30rpx 30rpx 30rpx;">
            <textarea class="tn-input" maxlength="500" confirm-type="done" placeholder="输入聊天内容" placeholder-style="color:#AAAAAA" :show-confirm-bar="false" :focus="focusTextarea" @blur="closeLandscape"></textarea>
          </view>
          <view class="tn-flex tn-flex-row-right" style="width: 100vw;padding-right: 30rpx;" @tap.stop="closeLandscape">
            <tn-button backgroundColor="#4B98FE80" fontColor="#FFFFFF" padding="2rpx 30rpx 2rpx 30rpx" width="160rpx" fontSize="26">发 送</tn-button>
          </view>
          <view class="tn-tabbar-height-safe tn-color-white" style="opacity: 0;">
            预留安全区域
          </view>
        </view>
          
      </tn-landscape>
      
      <!-- 假的输入框-->
      <view class="tabbar footerfixed tn-bg-white">
        <view class="tn-flex tn-flex-row-between tn-flex-col-center">
          <view class="justify-content-item tn-margin-top" @tap="showLandscape">
            <view class="tn-margin-left" style="padding: 20rpx 40rpx;background-color: #F9F9F9;width: 76vw;border-radius: 1000rpx;color: #999999;">
              别把评论区，当作你的舒适区
            </view>
          </view>
          <view class="justify-content-item tn-flex-row-center tn-flex-col-center tn-margin-top tn-padding-right-sm">
            <view class="tn-flex tn-flex-row-center tn-flex-col-center">
              <!-- <view class="tn-flex tn-flex-row-center tn-flex-col-center tn-padding-right" @tap.stop="openMoreModal">
                <view class="tn-icon-emoji-good tn-color-gray" style="font-size: 60rpx;"></view>
              </view> -->
              <view class="avatar-all">
                <view class="tn-shadow-blur" style="background-image:url('https://cdn.nlark.com/yuque/0/2023/jpeg/280373/1692940242409-assets/web-upload/fcc4eab6-b2ce-44eb-9165-c49b51f5f830.jpeg');width: 60rpx;height: 60rpx;background-size: cover;">
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      
    </view>
  </view>
</template>

<script>
  
  export default {
    options: {
      // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
      virtualHost: true
    },
    props: {
      value: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        openModal: false,
        
        /* 评论*/
        show: false,
        focusTextarea: false,
        maskCloseable: true,
      }
    },
    watch: {
      value: {
        handler(val) {
          this.openModal = val
        },
        immediate: true
      }
    },
    methods: {
      // 关闭弹框
      closeModal() {
        this.$emit('input', false)
      },
      
      // 弹出压屏窗
      showLandscape() {
        this.openLandscape()
      },
      // 打开压屏窗
      openLandscape() {
        this.show = true
        this.$nextTick(() => {
          this.focusTextarea = true
        })
      },
      // 关闭压屏窗，@blur 点击失去聚焦时，则相当于完成，关闭压屏窗并发送消息
      closeLandscape() {
        this.show = false
        this.focusTextarea = false
      },
      
      // 点击失去聚焦时，则相当于完成，关闭压屏窗并发送消息
      finish(){
        this.closeLandscape()
      },
    }
  }
</script>

<style lang="scss" scoped>
  
  /* 文字截取*/
  .clamp-text-1 {
    -webkit-line-clamp: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .clamp-text-2 {
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow: hidden;
  }
  
  .content-show{
    display: block;
  }
  
  .content-hide{
    display: none;
  }
  
  
  .wx-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99998 !important;
    
    view {
      box-sizing: border-box;
    }
    
    .image {
      width: 100%;
      height: 100%;
      border-radius: inherit;
    }
    
    .wam {
      z-index: 9999 !important;
      /* mask */
      &__mask {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;
        animation: showMask 0.25s linear 0s forwards;
      }
      
      /* close-btn */
      &__close-btn {
        position: absolute;
        top: 40rpx;
        right: 30rpx;
        z-index: 679;
        font-size: 30rpx;
      }
      
      /* wrapper */
      &__wrapper {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background-color: #FFFFFF;
        border-radius: 40rpx 40rpx 0rpx 0rpx;
        padding-top: 40rpx;
        // padding-bottom: 40rpx;
        // padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
        // padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
        transform-origin: center bottom;
        transform: scaleY(0);
        animation: showWrapper 0.25s linear 0s forwards;
        z-index: 99999;
      }
      
    }
  }
  
  @keyframes showMask {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes showWrapper {
    0% {
      transform: scaleY(0);
      opacity: 0;
    }
    100% {
      transform: scaleY(1);
      opacity: 1;
    }
  }
  
  /* 金刚区轮播 start */
  .card-swiper {
    height: 470rpx !important;
  }
    
  .card-swiper swiper-item {
    width: 750rpx !important;
    left: 0rpx;
    box-sizing: border-box;
    // padding: 0rpx 30rpx 90rpx 30rpx;
    overflow: initial;
  }
    
  .card-swiper swiper-item .swiper-item {
    width: 100%;
    display: block;
    height: 100%;
    transform: scale(1);
    transition: all 0.2s ease-in 0s;
    will-change: transform;
    overflow: hidden;
  }
    
  .card-swiper swiper-item.cur .swiper-item {
    transform: none;
    transition: all 0.2s ease-in 0s;
    will-change: transform;
  }
    
  .card-swiper swiper-item .swiper-item-text {
    margin-top: -300rpx;
    text-align: center;
    width: 100%;
    display: block;
    height: 50%;
    border-radius: 10rpx;
    transform: translate(100rpx, 0rpx) scale(0.9, 0.9);
    transition: all 0.6s ease 0s;
    will-change: transform;
    overflow: hidden;
  }
    
  .card-swiper swiper-item.cur .swiper-item-text {
    margin-top: -300rpx;
    width: 100%;
    transform: translate(0rpx, 0rpx) scale(0.9, 0.9);
    transition: all 0.6s ease 0s;
    will-change: transform;
  }
  
  .image-banner{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .image-banner image{
    width: 100%;
    height: 100%;
  }
  
  /* 轮播指示点 start*/
  .indication{
    z-index: 9999;
    width: 100%;
    height: 36rpx;
    position: absolute;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }
  
  .spot{
    background-color: #000000;
    opacity: 0.1;
    width: 10rpx;
    height: 10rpx;
    border-radius: 20rpx;
    top: -70rpx;
    margin: 0 8rpx !important;
    position: relative;
  }
  
  .spot.active{
    opacity: 0.15;
    width: 30rpx;
    background-color: #000000;
  }
  
  .icon12 {
    &__item {
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 112rpx;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          background-size: 100% 100%;
        }
      }
      
    }
  }
  
  .icon28 {
    &__item {
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 80rpx;
        height: 80rpx;
        font-size: 46rpx;
        margin-bottom: 18rpx;
        position: relative;
        border-radius: 20rpx;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg4.png);
        }
      }
      
    }
  }
  
  .icon13 {
    &__item {
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 56rpx;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
          background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg4.png);
            
        }
       
      }
      
    }
  }
  
  /* 选中颜色*/
  .tn-color-select{
    color: #e83a30;
  }
  
  /* 头像 start */
  .logo-image {
    width: 60rpx;
    height: 60rpx;
    position: relative;
  }
  
  .logo-image-min {
    width: 40rpx;
    height: 40rpx;
    position: relative;
  }
  
  .logo-pic {
    background-size: cover;
    background-repeat: no-repeat;
    // background-attachment:fixed;
    background-position: center;
    // box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
    border-radius: 100rpx;
    overflow: hidden;
    // background-color: #FFFFFF;
  }
  
  /* 作者标签 start*/
  .tag-user {
    display: inline-block;
    padding: 4rpx 8rpx;
    margin: 0 15rpx 0 10rpx;
    border-radius: 10rpx;
    background-color: #e83a30;
    font-size: 16rpx;
  }
  
  /* 底部 start*/
  .footerfixed{
   position: fixed;
   width: 100%;
   bottom: 0;
   z-index: 999;
   background-color: rgba(255,255,255,0.5);
   box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
  }
  
  .tabbar {
    align-items: center;
    min-height: 130rpx;
  	padding: 0;
  	height: calc(130rpx + env(safe-area-inset-bottom) / 2);
  	padding-bottom: calc(30rpx + env(safe-area-inset-bottom) / 2);
    padding-left: 5rpx;
    padding-right: 10rpx;
  }
  
  /* 间隔线 start*/
  .tn-strip-bottom {
   width: 100%;
   border-bottom: 20rpx solid #F8F7F8;
  }
  /* 间隔线 start*/
  .tn-strip-bottom-min {
   width: 100%;
   border-bottom: 1rpx solid #F8F7F8;
  }
  
  /* 头像*/
  .avatar-all {
    width: 60rpx;
    height: 60rpx;
    border: 4rpx solid rgba(255,255,255,0.05);
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
  }
  
  .tn-input{
    width: calc(100vw - 120rpx);
    height: 120rpx;
  }
    
  .chat-input{
    z-index: 680;
    position: fixed;
    bottom: calc(2vh - 60rpx + env(safe-area-inset-bottom));
    border-radius: 24rpx 24rpx 0 0;
    background: linear-gradient(180deg, #FFFFFF, #FFFFFF, #FFFFFF,  #FFFFFF,  #FFFFFF, #FFFFFF00);
  }
  
  /* 底部安全边距 start*/
  .tn-tabbar-height-safe {
  	min-height: 160rpx;
  	height: calc(180rpx + env(safe-area-inset-bottom));
  	height: calc(180rpx + constant(safe-area-inset-bottom));
  }
  .tn-tabbar-height {
  	min-height: 120rpx;
  	height: calc(140rpx + env(safe-area-inset-bottom));
  	height: calc(140rpx + constant(safe-area-inset-bottom));
  }
  .tn-footerfixed {
    width: 100%;
    margin-top: 60rpx;
    margin-bottom: calc(env(safe-area-inset-bottom)- 20rpx );
    z-index: 1024;
    box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0);
  }
  
  /deep/.input-placeholder {
    font-size: 30rpx;
    color: #C6D1D8;
  }
  
</style>